<template>
    <div class="progress-box">
        <div class="content">
          <div class="content-box">
            <circleI :world="world1" class="animate__animated animate__bounce circle1"/>
            <circleI :world="world2" class="animate__animated animate__bounce circle2"/>
            <circleI :world="world3" class="animate__animated animate__bounce circle3"/>
            <circleI :world="world4" class="animate__animated animate__bounce circle4"/>
            <circleI :world="world5" class="animate__animated animate__bounce circle5"/>
          </div>
          <div class="content-box">
            <div class="content">
              <el-card>
                <ul>
                  <li>Vuex</li>
                  <li>element</li>
                  <li>vue父子组件传值</li>
                  <li>事件监听watch</li>
                  <li>flex布局</li>
                  <li>css3自适应布局vh/vw</li>
                  <li>代码规范</li>
                  <li>敏捷开发</li>
                  <li>scss</li>
                  <li>js</li>
                </ul>
              </el-card>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
import circleI from './circle'
export default {
  name: 'progress',
  components: {
    circleI
  },
  data () {
    return {
      world1: 'VueX',
      world2: 'ThingJs',
      world3: 'vue父子组件传值',
      world4: '代码规范'
    }
  }
}
</script>

<style lang="less" scoped>
.progress-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 4vh;
    .content {
        width: 80%;
        display: flex;
        .content-box {
          flex: 1;
          background: blanchedalmond;
          margin: 1vw;
          position: relative;
          .circle1 {
            position: absolute;
            top: 13vh;
            left: 2vw;
          }
          .circle2 {
            position: absolute;
            top: 3vh;
            left: 10vw;
          }
          .circle3 {
            position: absolute;
            top: 28vh;
            left: 18vw;
          }
          .circle4 {
            position: absolute;
            top: 13vh;
            left: 18vw;
          }
          .circle5 {
            position: absolute;
            top: 30vh;
            left: 7vw;
          }
          .content{
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
    }
}
</style>
